// 监控区域
(function () {

    $(".monitor").find("a").on("click", function () {
        $(this).addClass("active").siblings().removeClass();
        $(".monitor .inner .content").eq($(this).index()).show().siblings(".content").hide();
    })
    $(".monitor .tabs a").eq(0).trigger("click");

    $(".monitor .marquee").each(function (i, e) {
        var rows = $(this).children().clone(true);
        $(this).append(rows);
    })
})();

//订单
(function () {
    var myChart = echarts.init(document.querySelector('.pie'));
    var option = {
        color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],
        tooltip: {
            show: true,
            formatter: '{a}<br/>{b}:{c}({d}%)'

        },

        series: [
            {
                name: '点位统计',
                type: 'pie',
                radius: ["10%", '70%'],
                center: ['50%', '50%'],
                roseType: 'radius',
                label: {
                    color: "#fff",
                    fontSize: 10
                },
                labelLine: {
                    length: 6,
                    length2: 8
                },
                data: [
                    { value: 20, name: '云南' },
                    { value: 26, name: '北京' },
                    { value: 24, name: '山东' },
                    { value: 25, name: '河北' },
                    { value: 20, name: '江苏' },
                    { value: 25, name: '浙江' },
                    { value: 30, name: '四川' },
                    { value: 42, name: '湖北' }
                ]
            }
        ]
    };
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    })
})();

// 用户统计
(function () {
    var myChart = echarts.init(document.querySelector('.bar'));
    var item = {
        name: '',
        value: 1200,
        // 柱子颜色
        itemStyle: {
            color: '#254065'
        },
        // 鼠标经过柱子颜色
        emphasis: {
            itemStyle: {
                color: '#254065'
            }
        },
        // 工具提示隐藏
        tooltip: {
            trigger: 'item',
            extraCssText: 'opacity:0'
        },
    }
    var option = {
        color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
                offset: 0, color: '#00fffb' // 0% 处的颜色
            }, {
                offset: 1, color: '#0061ce' // 100% 处的颜色
            }],
            global: false // 缺省为 false
        },
        tooltip: {
            trigger: 'item',
            axisPointer: {
                type: 'none',

            }
        },
        grid: {
            top: '3%',
            right: '3%',
            bottom: '3%',
            left: '0%',
            containLabel: true,
            show: true,
            borderColor: 'rgba(0, 240, 255, 0.3)'
        },
        xAxis: [
            {
                type: 'category',
                data: ['上海', '广州', '北京', '深圳', '合肥', '', '......', '', '杭州', '厦门', '济南', '成都', '重庆'],
                axisTick: {
                    alignWithLabel: true,
                    show: false
                },
                axisLabel: {
                    color: '#4c9bfd'

                }, axisLine: {
                    lineStyle: {
                        color: 'rgba(0, 240, 255, 0.3)',
                        // width:8,  x轴线的粗细
                        // opcity: 0,   如果不想显示x轴线 则改为 0
                    }
                }

            }
        ],
        yAxis: [
            {
                type: 'value',
                axisTick: {
                    show: false,

                }, axisLabel: {
                    color: '#4c9bfd'
                }, splitLine: {
                    lineStyle: {
                        color: 'rgba(0, 240, 255, 0.3)'
                    }
                }
            }

        ],
        series: [
            {
                name: 'Direct',
                type: 'bar',
                barWidth: '60%',
                data: [2100, 1900, 1700, 1560, 1400, item, item, item, 900, 750, 600, 480, 240]
            }
        ]
    };
    myChart.setOption(option);

    window.addEventListener("resize", function () {
        myChart.resize();
    })
})();



(function () {
    var index = 0;
    var data = [
        ["20,301,987", "7,289", "1,321", "456"],
        ["99834", "3123", "1023", "345"]
    ];
    $('.order .filter a').on('click', function () {
        index = $(this).index();
        $(this).addClass('active').siblings('a').removeClass();
        $('.order .data .item').eq(0).find('h4').html(data[0][index]);
        $('.order .data .item').eq(1).find('h4').html(data[1][index]);
    })

    var timer = setInterval(function () {
        index = (index + 1) % ($('.order .filter a').length);
        $('.order .filter a').eq(index).addClass('active').siblings('a').removeClass();
        $('.order .data .item').eq(0).find('h4').html(data[0][index]);
        $('.order .data .item').eq(1).find('h4').html(data[1][index]);
    }, 1000)

    $('.order .inner').hover(function () {
        clearInterval(timer);
    }, function () {
        clearInterval(timer);
        timer = setInterval(function () {
            index = (index + 1) % ($('.order .filter a').length);
            $('.order .filter a').eq(index).addClass('active').siblings('a').removeClass();
            $('.order .data .item').eq(0).find('h4').html(data[0][index]);
            $('.order .data .item').eq(1).find('h4').html(data[1][index]);
        }, 1000)
    });

})();


// 销售
(function () {

    var salesData = {
        year: [
            [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
            [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
        ],
        quarter: [
            [23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],
            [43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34]
        ],
        month: [
            [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],
            [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98]
        ],
        week: [
            [43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],
            [32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24]
        ]
    };

    var myChart = echarts.init(document.querySelector(".line"));
    var option = {
        color: ['#00f2f1', '#ed3f35'],
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            textStyle: {
                color: '#4c9bfd' // 图例文字颜色
            },
            right: '10%' // 距离右边10%
        },
        grid: {
            top: '20%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            show: true,// 显示边框
            borderColor: '#012f4a',// 边框颜色
            containLabel: true // 包含刻度文字在内
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            axisTick: {
                show: false
            },
            axisLabel: {
                color: '#4c9bfd'
            },
            axisline: {
                show: false
            },
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        },
        yAxis: {
            type: 'value',
            axisTick: {
                show: false
            },
            splitLine: {
                lineStyle: {
                    color: '#012f4a'
                }
            },
            axisLabel: {
                color: '#4c9bfd'
            },
        },
        series: [{
            name: '预期销售额',
            data: salesData.year[0],
            type: 'line',
            smooth: true
        }, {
            name: '实际销售额',
            data: salesData.year[1],
            type: 'line',
            smooth: true
        }

        ]
    };
    myChart.setOption(option);




    var index = 0;
    $('.sales a').on('click', function () {
        $(this).addClass('active').siblings('a').removeClass();
        index = $(this).index() - 1;
        option.series[0].data = salesData[$(this).data('id')][0];
        option.series[1].data = salesData[$(this).attr('data-id')][1];
        myChart.setOption(option);
    })
    var timer = setInterval(function () {
        // index = (index + 1) % 4;
        index = (index + 1) % $('.sales a').length;
        $('.sales a').eq(index).trigger('click');
    }, 2000)
    $('.sales .inner').hover(function () {
        clearInterval(timer);
    }, function () {
        clearInterval(timer);
        timer = setInterval(function () {
            // index = (index + 1) % 4;
            index = (index + 1) % $('.sales a').length;
            $('.sales a').eq(index).trigger('click');
        }, 2000)
    })
    window.addEventListener("resize", function () {
        myChart.resize();
    })

})();


// 渠道
(function () {
    var myChart = echarts.init(document.querySelector('.radar'));
    const data = [[90, 19, 56, 11, 34]];


    option = {
        // backgroundColor: '#161627',
        tooltip: {
            show: true,
            position: ['60%', '10%'],
        },
        radar: {
            center: ['50%', '50%'],
            radius: '65%',
            indicator: [
                { name: '机场', max: 100 },
                { name: '商场', max: 100 },
                { name: '火车站', max: 100 },
                { name: '汽车站', max: 100 },
                { name: '地铁', max: 100 },
            ],


            shape: 'circle',
            splitNumber: 4,

            axisName: {
                color: '#4c9bfd'
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.5)',
                }
            },
            splitArea: {
                show: false
            },
            axisLine: {

                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.5)'
                },
                show: true
            },

        },


        series: [
            {
                name: 'Beijing',
                type: 'radar',
                // lineStyle: lineStyle,
                lineStyle: {
                    normal: {
                        color: 'rgba(255, 255, 255, 0.7)',
                        // width: 1
                    }
                },
                data: data,
                symbol: 'circle',
                symbolSize: 5,
                itemStyle: {
                    color: '#fff'
                },
                label: {
                    show: true,
                    color: '#fff',
                    fontSize: 10
                },
                areaStyle: {
                    color: 'rgba(238, 197, 102, 0.6)',
                },

            },

        ]
    };
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    })
})();


// 季度
(function () {
    var myChart = echarts.init(document.querySelector('.wrap .gauge'));
    var option = {
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['130%', '150%'],
                // 移动下位置  套住50%文字
                center: ['48%', '80%'],
                startAngle: 180,
                label: {
                    show: false,

                },

                labelLine: {
                    show: false
                },
                hoverOffset: 0,
                data: [
                    {
                        value: 100,
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(
                                0, 0, 0, 1, [
                                { offset: 0, color: "#00c9e0" },//0起始颜色
                                { offset: 1, color: "#005fc1" } // 1 结束颜色
                            ]
                            )
                        }
                    },
                    {
                        value: 100,
                        itemStyle: {
                            color: '#12274d'
                        }
                    },
                    {
                        value: 200,
                        itemStyle: {
                            color: 'transparent'
                        }
                    },

                ]
            }
        ]
    };
    myChart.setOption(option);

})();

// 排行
(function () {
    var hotData = [
        {
            city: '北京',  // 城市
            sales: '25, 179',  // 销售额
            flag: true, //  上升还是下降
            brands: [   //  品牌种类数据
                { name: '可爱多', num: '9,086', flag: true },
                { name: '娃哈哈', num: '8,341', flag: true },
                { name: '喜之郎', num: '7,407', flag: false },
                { name: '八喜', num: '6,080', flag: false },
                { name: '小洋人', num: '6,724', flag: false },
                { name: '好多鱼', num: '2,170', flag: true },
            ]
        },
        {
            city: '河北',
            sales: '23,252',
            flag: false,
            brands: [
                { name: '可爱多', num: '3,457', flag: false },
                { name: '娃哈哈', num: '2,124', flag: true },
                { name: '喜之郎', num: '8,907', flag: false },
                { name: '八喜', num: '6,080', flag: true },
                { name: '小洋人', num: '1,724', flag: false },
                { name: '好多鱼', num: '1,170', flag: false },
            ]
        },
        {
            city: '上海',
            sales: '20,760',
            flag: true,
            brands: [
                { name: '可爱多', num: '2,345', flag: true },
                { name: '娃哈哈', num: '7,109', flag: true },
                { name: '喜之郎', num: '3,701', flag: false },
                { name: '八喜', num: '6,080', flag: false },
                { name: '小洋人', num: '2,724', flag: false },
                { name: '好多鱼', num: '2,998', flag: true },
            ]
        },
        {
            city: '江苏',
            sales: '23,252',
            flag: false,
            brands: [
                { name: '可爱多', num: '2,156', flag: false },
                { name: '娃哈哈', num: '2,456', flag: true },
                { name: '喜之郎', num: '9,737', flag: true },
                { name: '八喜', num: '2,080', flag: true },
                { name: '小洋人', num: '8,724', flag: true },
                { name: '好多鱼', num: '1,770', flag: false },
            ]
        },
        {
            city: '山东',
            sales: '20,760',
            flag: true,
            brands: [
                { name: '可爱多', num: '9,567', flag: true },
                { name: '娃哈哈', num: '2,345', flag: false },
                { name: '喜之郎', num: '9,037', flag: false },
                { name: '八喜', num: '1,080', flag: true },
                { name: '小洋人', num: '4,724', flag: false },
                { name: '好多鱼', num: '9,999', flag: true },
            ]
        }
    ];
    var index = 0;
    function upload(that) {
        index = $(that).index();
        $(that).addClass('active').siblings('li').removeClass();
        var str = "";
        $.each(hotData[index].brands, function (i, e) {
            str += `<li><span>${e.name}</span><span>${e.num}<s class=${e.flag ? "icon-up" : "icon-down"}></s></span></li>`;
            $('.sub').html(str);
        })
    }
    $('.top .province .data ul li').on('mouseover', function () {
        upload(this);

    });
    $('.top .province .data ul li').eq(0).trigger('mouseover');

    var timer = setInterval(function () {
        index = (index + 1) % 5;
        upload(`.top .province .data ul li:eq(${index})`);
    }, 1000)

    $('.top .province .data ul li').hover(function () {
        clearInterval(timer);
    }, function () {
        timer = setInterval(function () {
            index = (index + 1) % 5;
            upload(`.top .province .data ul li:eq(${index})`);
        }, 1000)
    })


})();